<template>
  <afl-loading
    v-if="!data.ready"
    :width="50"
    :height="50"
    class="afl-loading"
    :tip-style="{ fontSize: '16px' }"
  >
    Loading...
  </afl-loading>
  <fullScreenContainer v-else>
    <el-container class="first-container">
      <el-aside class="header">
        <!-- <title-header></title-header>-->
        <div class="title-wrapper">
          <icon-font
            icon-class="afl-xuanze"
            :icon-style="{ fontSize: '20px' }"
          ></icon-font>
          {{ $t("wms.aGivenYear") }}
          <div class="year-boxs">
            <el-date-picker
              v-model="data.year"
              type="year"
              :placeholder="$t('wms.aGivenYear')"
              @change="select(data.year)"
            />
          </div>
        </div>
        <div class="year-list">
          <div class="containers">
            <el-checkbox-group
              class="containers"
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox
                v-for="item in data.cities"
                :class="item.is_send == 'Y' ? 'year-box2' : 'year-box'"
                :key="item.weeks"
                :label="item.weeks"
                size="large"
                border
                >{{ "Week " + item.weeks }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-aside>
      <el-main>
        <email-table :tableList="data.tableList"></email-table>
      </el-main>
    </el-container>
  </fullScreenContainer>
</template>

<script setup>
import aflLoading from "@/components/loading";
import fullScreenContainer from "@/components/fullScreenContainer";
import iconFont from "@/components/IconFont/iconFont";
import processLine from "@/components/mes/common/processLine";
import { provide, reactive, ref, onMounted, defineEmits, watch } from "vue";
import ScaleBox from "vue3-scale-box";
import {
  getYears,
  getWeeksByYears,
  getDataByWeekYearForWeb,
} from "@/api/mesApi";
import titleHeader from "@/components/wms/emailPush/titleHeader";
import emailTable from "@/components/wms/emailPush/emailTable";
import useI18n from "@/hooks/language";

const { t } = useI18n();

const data = reactive({
  ready: false,
  year: "", // (new Date()).getFullYear() + ''
  cities: [],
  checkedCities: [],
  tableList: [],
});

const checkedCities = ref([]);
const isIndeterminate = ref(true);

onMounted(async () => {
  data.ready = true;
  // 获取年份
  await getYears().then((res) => {
    data.year = res.data[0] + "";
    getWeeks(data.year);
  });
});

// 选择时间
const select = (monthData) => {
  // 如果不为空就执行后续操作
  let month;
  if (monthData !== null) {
    data.year = monthData.getFullYear() + "";
  } else {
    console.log("r");
  }
  getWeeks(data.year);
};
// 获取周
const getWeeks = (year) => {
  getWeeksByYears(year).then((res) => {
    if (res.data.length > 0) {
      checkedCities.value.push(res.data[res.data.length - 1].weeks);
      res.data.forEach((item) => {
        // item.weeks = 'Week' + item.weeks
        data.cities.unshift(item);
      });
    } else {
      data.cities = [];
    }
    getDataByWeekYeartable();
  });
};

const handleCheckedCitiesChange = (value) => {
  console.log(checkedCities);
  getDataByWeekYeartable();
};

// 获取表格数据
const getDataByWeekYeartable = () => {
  data.tableList = [];
  console.log(checkedCities.value);
  const week = checkedCities.value;
  getDataByWeekYearForWeb({
    year: data.year,
    week: 0,
  }).then((res) => {
    data.tableList = res.data;
  });
};
</script>

<style scoped lang="scss">
@forward "index";

#app,
#dv-full-screen-container {
  background-color: #edf2f9;
}

* {
  margin: 0;
  padding: 0;
}
</style>
